<?php echo $this->Html->script(array('lib/highcharts.js'),array('inline'=>false));?>
<div class="dashboard-wrap">
	<div class="span12">
		<div class="row-fluid chart-wrap">
			<div class="span4">
				<ul>
					<li><?php echo __('Total articles')." : ".$this->Html->link($totalArticles,array(
					'controller'=>'articles',
					'action' => 'index'
					))?>
					</li>
					<li><?php echo __('Uncheck articles')." : ".$this->Html->link($uncheckArticles, array(
					'controller'=> 'articles',
					'action' => 'filter',
					'uncheck'
					),array('class'=>'text-red'))?>
					</li>
					<li><?php echo __('Recent articles')." : ".$this->Html->link($recentArticles, array(
					'controller'=> 'articles',
					'action' => 'filter',
					'recent'
					))?>
					</li>
					<li><?php echo __('Checked articles')." : ".$this->Html->link($checkedArticles, array(
					'controller'=> 'articles',
					'action' => 'filter',
					'checked'
					))?>
					</li>
				</ul>
			</div>
			<div class="span8 text-center">
				<div id="chart-pie"></div>
			</div>
			<div class="chart-column">
				<div class="tabbable" style="margin-bottom: 18px;">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#tab1" data-toggle="tab">Week</a>
						</li>
						<li class=""><a href="#tab2" data-toggle="tab">Month</a></li>
						<li class=""><a href="#tab3" data-toggle="tab">Year</a></li>
					</ul>
					<div class="tab-content"
						style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
						<div class="tab-pane active" id="tab1">
							<div id="chart-column-week"></div>
						</div>
						<div class="tab-pane" id="tab2">
							<div id="chart-column-month"></div>
						</div>
						<div class="tab-pane" id="tab3">
							<div id="chart-column-year"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function () {
    $(document).ready(function() {
        var chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'chart-pie',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Article By Category'
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Browser category',
                data: <?php echo json_encode($dataPieChart) ?>
            }]
        });

        var chart2 = new Highcharts.Chart({
    		chart: {
    			renderTo: 'chart-column-week',
    			type: 'column'
    		},
    		title: {
    			text: '<?php echo __(sprintf('Article from %s to %s',
    				date('d/m/Y',$firstDayWeek),date('d/m/Y',strtotime('7 day',$firstDayWeek))),true) ?>'
    		},
    		xAxis: {
    			categories: <?php echo json_encode(array_keys($dataColumnChart['week'])) ?>
    		},
    		yAxis: {
    			min: 0,
    			title: {
    				text: '<?php echo __('Number') ?>'
    			}
    		},
    		legend: {
    			layout: 'vertical',
    			align: 'right',
    			verticalAlign: 'top',
    			x: -10,
    			y: 100,
    			borderWidth: 0
    		},
    		tooltip: {
				formatter: function() {
					return ''+this.y;
				}
			},
    		plotOptions: {
    			column: {
    				pointPadding: 0.2,
    				borderWidth: 0
    			}
    		},
    			series: [{
    			name: 'Article',
    			data: <?php echo json_encode(array_values($dataColumnChart['week']), JSON_NUMERIC_CHECK) ?>

    		}]
    	});

		var chart3 = new Highcharts.Chart({
			chart: {
				renderTo: 'chart-column-month',
				type: 'column'
			},
			title: {
				text: '<?php echo __(sprintf('Article in %s ',date('m/Y'))) ?>'
			},
			xAxis: {
				categories: <?php echo json_encode(array_keys($dataColumnChart['month'])) ?>
			},
			yAxis: {
				min: 0,
				title: {
					text: '<?php echo __('Number') ?>'
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -10,
				y: 100,
				borderWidth: 0
			},
			tooltip: {
				formatter: function() {
					return ''+this.y;
				}
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
				series: [{
				name: 'Article',
				data: <?php echo json_encode(array_values($dataColumnChart['month']), JSON_NUMERIC_CHECK) ?>
		
			}]
		});

		var chart4 = new Highcharts.Chart({
			chart: {
				renderTo: 'chart-column-year',
				type: 'column'
			},
			title: {
				text: '<?php echo __(sprintf('Article in %s ',date('Y'))) ?>'
			},
			xAxis: {
				categories: <?php echo json_encode(array_keys($dataColumnChart['year'])) ?>
			},
			yAxis: {
				min: 0,
				title: {
					text: '<?php echo __('Number') ?>'
				}
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'top',
				x: -10,
				y: 100,
				borderWidth: 0
			},
			tooltip: {
				formatter: function() {
					return ''+this.y;
				}
			},
			plotOptions: {
				column: {
					pointPadding: 0.2,
					borderWidth: 0
				}
			},
				series: [{
				name: 'Article',
				data: <?php echo json_encode(array_values($dataColumnChart['year']), JSON_NUMERIC_CHECK) ?>
		
			}]
		});
    });
});
</script>

